<template>
  <a-row>
    <a-spin :spinning="priceLoading">
      <a-col :span="3">
        <a-tabs :style="{ height: '485px' }" default-active-key="1" tab-position="left" @change="onChangeCategory">
          <a-tab-pane v-for="(item,index) in businessMenu" :key="index" :tab="item"></a-tab-pane>
        </a-tabs>
      </a-col>
      <a-col :span="21">
        <a-table
          size="small"
          :row-key="(record) => record.business_id"
          :data-source="businessData"
          :columns="businessList"
          :loading="priceLoading"
        >
          <template slot="official_fee" slot-scope="text">
            <a-tag color="red">{{ text }}</a-tag>
          </template>
          <template slot="offer_section_lft" slot-scope="text">
            <a-tag color="red">{{ text }}</a-tag>
          </template>
          <template slot="offer_section_rgt" slot-scope="text">
            <a-tag color="red">{{ text }}</a-tag>
          </template>
        </a-table>
      </a-col>
    </a-spin>
  </a-row>
</template>

<script>
import { getBusiness } from '@/api/common'

export default {
  name: 'Question',
  data () {
    return {
      businessList: [
        {
          title: '业务名称',
          dataIndex: 'name',
          width: '250px',
          ellipsis: true
        },
        {
          title: '官费',
          dataIndex: 'official_fee',
          scopedSlots: { customRender: 'official_fee' }
        },
        {
          title: '最低报价',
          dataIndex: 'offer_section_lft',
          scopedSlots: { customRender: 'offer_section_lft' }
        },
        {
          title: '回执时间',
          dataIndex: 'receipt_time'
        },
        {
          title: '申请周期',
          dataIndex: 'application_cycle'
        },
        {
          title: '有效期',
          dataIndex: 'period_of_validity',
          ellipsis: true
        }
        // {
        //   title: '最高报价',
        //   dataIndex: 'offer_section_rgt',
        //   scopedSlots: { customRender: 'offer_section_rgt' }
        // }
      ],
      businessMenu: {},
      businessData: [],
      priceLoading: true
    }
  },
  created () {
    this.getBusiness(10)
  },
  methods: {
    getBusiness (id) {
      const app = this
      app.priceLoading = true
      getBusiness(id).then(res => {
        if (res.status === 0) {
          app.businessData = res.result.data
          app.businessMenu = res.result.category_opts
          app.priceLoading = false
        }
      })
    },
    onChangeCategory (key) {
      this.getBusiness(key)
    }
  }
}
</script>

<style scoped>

</style>
